<template>
	<u-popup :show="visible" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="visible=false">
	 
		<view class="popup">
			 <view class="tip">
				 商品综合评价 <text>{{scoreTxt}} </text>
			 </view>
			 
			 <view class="flex" style="justify-content: center;margin-bottom:50rpx;">
				 <uni-rate  v-model="scoreVal"  activeColor="#F93A59" :size="22"  />
			 </view>
			 
			 <view class="txt"> —— 期待你写更多真实有帮助的评价 ——</view>
			 <view class="txt">  您的评价对其他买家非常重要 </view>
			 
			 <view class="woodsbtn" style="width: 100%;margin: 60rpx 0 30rpx"  @click="tourl('/pages/my/appraise/addappraise?id='+id)">
				展开讲讲，最多得500积分
			 </view>
			 
			 <view class="woodsbtn" style="width: 100%;color:#999999;background-color: #fff;border:2rpx solid #999999;margin-bottom: 30rpx;"
			  @click="handleSubmit">
			 	直接提交，不要奖励
			 </view>
		</view>
			 
			
		 
	</u-popup> 
	 
</template>

<script>
	export default {
		name:"woods-popupModal",
		props: {
			show:{ 
				type:Boolean,
				default:false
			}, 
			score:{
				type:Number,
				default:0
			}
		},
		watch:{
			show(flag) {
				this.visible=flag
			},
			score(score){
				let scoreTxt=''
				if (score==1) {
					scoreTxt= "非常差"
				} else if(score==2){
					scoreTxt= "差"
				}else if(score==3){
					scoreTxt= "一般"
				}else if(score==4){
					scoreTxt= "好"
				}else if(score==5){
					scoreTxt= "非常好"
				}else{
					scoreTxt= ""
				}
				this.scoreTxt=scoreTxt
				this.scoreVal=score
			}
		},
		data() {
			return {
				visible:false,
				scoreTxt:"",
				scoreVal:0,
				id:""
			};
		},
		methods:{
			/*
			@description 回调事件
			@extends {flag=true 确认 flag:false 取消}
			*/ 
			handleSubmit(flag){
				this.$emit("handleSubmit",this.scoreVal)
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		 font-weight: bold;
		 font-size: 36rpx;
		 color: #111111;
		 margin-bottom: 50rpx;
		text{
			font-weight: bold;
			font-size: 36rpx;
			color: #F93A59;
		}
	}
 
	.txt{
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
		padding: 10rpx;
		text-align: center;
	}
	.btn{
		font-weight: bold;
		font-size: 32rpx;
		color: #277EEF;
		line-height: 68rpx;
		text-align: center;
		margin-top: 15rpx;
	}
}
.btn2{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 98rpx;
	text-align: center;
}
</style>